<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

<head>
	<meta charset="UTF-8">
	<title>MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)</title>
	<meta name="Description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />

	
<!-- include meta.html -->
<!-- This file is typically overriden by the target, with own Twitter
     account etc. Most data is taken from the theme file though.  
  -->

<!-- include robotsmeta.html -->

<!-- end include robotsmeta.html -->

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@msmakecode" />
<meta name="twitter:title" content="MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)" />
<meta name="twitter:description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />
<meta name="twitter:image" content="" />

<meta property="og:title" content="MakeCode Maker - Blocks / Javascript editor - MakeCode Maker (Cortex class)" />
<meta property="og:site_name" content="Microsoft MakeCode" />
<meta property="og:type" content="website" />
<meta property="og:description" content="A Blocks / JavaScript code editor for MakeCode Maker Boards" />
<meta property="fb:app_id" content="" />
<meta property="og:image" content="" />

<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="">
<link rel="icon" type="image/png" href="">
<link rel="shortcut icon" href="">
<meta name="theme-color" content="#ecf0f1">

<!-- end include meta.html -->

	
<!-- include head.html -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

<link rel="stylesheet" data-rtl="/blb/rtlsemantic.css" href="/semantic.css" />
<link id="blocklycss"  data-rtl="/blb/rtlblockly.css" rel="stylesheet" href="/blockly.css" />
<link rel="stylesheet" href="/docfiles/style.css" />
<link rel="stylesheet" href="/docfiles/vs.css" />
<link rel="stylesheet" href="/docfiles/target.css" />

<script src="/jquery.js"></script>

<script src="/embed.js" type="text/javascript"></script>
<script src="/docfiles/docs.js" type="text/javascript"></script>
<script src="/docfiles/target.js" type="text/javascript"></script>

<style>
    
.ui.accent { color: #ecf0f1; }
.ui.inverted.accent { background: #ecf0f1; }

</style>

<!-- end include head.html -->


</head>

<body id='root' class='root'>

	<div id="accessibleMenu" class="ui accessibleMenu borderless fixed menu" role="menubar">
		
            <a href="#maincontent" class="ui item link" tabindex="0" role="menuitem">Skip to main content</a>
        
	</div>


	
<!-- include tocheader.html -->
<div class="ui vertical accent lighttoc sidebar menu left hideprint">
    <div class="item">
        <a href="/docs/.html" class="header focused" tabindex="0" title="Go to editor">
            <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
        </a>
        Documentation
    </div>
    <div class="item search">
        <form id="tocsearch1" role="form" method="get" action="https://www.bing.com/search">
            <div class="ui fluid icon input">
                <input type="hidden" name="q1" value="site:https://maker.makecode.com/" />
                
                <input type="search" name="q" placeholder="Search..." aria-label="Search Documentation">
                <i onclick="document.getElementById('tocsearch1').submit();" tabindex="0" class="search link icon" aria-label="Search" role="button"></i>
            
            </div>
        </form>
    </div>
    <!-- TOC Menu -->
    <div class="menuContainer">
        
    <a class="item " href="/docs/about.html" role="menuitem">About</a>


    <a class="item " href="/docs/faq.html" role="menuitem">FAQ</a>


    <div class="item" title="">
        <a class="header " href="/docs/reference.html" role="menu">Reference</a>
        <div class="menu">
            
    <a class="item " href="/docs/reference/music.html" role="menuitem">music</a>


    <a class="item " href="/docs/reference/pins.html" role="menuitem">pins</a>


    <a class="item " href="/docs/reference/control.html" role="menuitem">control</a>


    <a class="item " href="/docs/reference/serial.html" role="menuitem">serial</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/blocks.html" role="menu">Blocks</a>
        <div class="menu">
            
    <a class="item " href="/docs/blocks/on-start.html" role="menuitem">On Start</a>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/loops.html">Loops</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/loops/repeat.html" role="menuitem">repeat</a>


    <a class="item " href="/docs/blocks/loops/for.html" role="menuitem">for</a>


    <a class="item " href="/docs/blocks/loops/while.html" role="menuitem">while</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/logic.html">Logic</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/logic/if.html" role="menuitem">if</a>


    <a class="item " href="/docs/blocks/logic/boolean.html" role="menuitem">Boolean</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/variables.html">Variables</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/variables/assign.html" role="menuitem">assign</a>


    <a class="item " href="/docs/blocks/variables/change.html" role="menuitem">change var</a>


    <a class="item " href="/docs/blocks/variables/var.html" role="menuitem">var</a>

        </div>
    </div>


    <a class="item " href="/docs/blocks/math.html" role="menuitem">Math</a>


    <a class="item " href="/docs/blocks/javascript-blocks.html" role="menuitem">JavaScript blocks</a>


    <a class="item " href="/docs/blocks/custom.html" role="menuitem">Custom blocks</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/javascript.html" role="menu">JavaScript</a>
        <div class="menu">
            
    <a class="item " href="/docs/javascript/call.html" role="menuitem">Calling</a>


    <a class="item " href="/docs/javascript/sequence.html" role="menuitem">Sequencing</a>


    <a class="item " href="/docs/javascript/variables.html" role="menuitem">Variables</a>


    <a class="item " href="/docs/javascript/operators.html" role="menuitem">Operators</a>


    <a class="item " href="/docs/javascript/statements.html" role="menuitem">Statements</a>


    <a class="item " href="/docs/javascript/functions.html" role="menuitem">Functions</a>


    <a class="item " href="/docs/javascript/types.html" role="menuitem">Types</a>


    <a class="item " href="/docs/javascript/classes.html" role="menuitem">Classes</a>


    <a class="item " href="/docs/javascript/interfaces.html" role="menuitem">Interfaces</a>


    <a class="item " href="/docs/javascript/generics.html" role="menuitem">Generics</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/types.html" role="menu">Types</a>
        <div class="menu">
            
    <a class="item " href="/docs/types/number.html" role="menuitem">Number</a>


    <a class="item " href="/docs/types/string.html" role="menuitem">String</a>


    <a class="item " href="/docs/types/boolean.html" role="menuitem">Boolean</a>


    <a class="item " href="/docs/types/array.html" role="menuitem">Array</a>


    <a class="item " href="/docs/types/function.html" role="menuitem">Function</a>

        </div>
    </div>



    </div>
</div>

<div class="ui fixed accent borderless lighttoc main menu hideprint">
  <div class="ui container">
    
            <a id="togglesidebar" class="launch icon item" tabindex="0" title="Side menu" aria-label="Side menu" role="menu" aria-expanded="false">
                <i class="content icon"></i>
            </a>
        

    <div class="item">
        
    </div>
    
    <div class="right menu">
        <a href="/docs/.html" class="header item" tabindex="0" title="Go to editor">
            <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
        </a>
    </div>
  </div>
</div>
<!-- end include tocheader.html -->


	<div id="docs" class="pusher">

		
<!-- include toc.html -->
<div class="toc ui accent lighttoc hideprint">
    <div class="ui vertical accent lighttoc sticky menu tocmenu">
        <div class="item">
            <a href="/docs/.html" class="header focused" tabindex="0" title="Go to editor">
                <img aria-hidden="true" role="presentation" class="ui mini image" src="docs/static/logo.svg" />
            </a>
            Documentation
        </div>
        <div class="item search">
            <form id="tocsearch2" role="form" method="get" target="_blank" action="https://www.bing.com/search">
                <div class="ui fluid icon input">
                    <input type="hidden" name="q1" value="site:https://maker.makecode.com/" />
                    
                <input type="search" name="q" placeholder="Search..." aria-label="Search Documentation">
                <i onclick="document.getElementById('tocsearch2').submit();" tabindex="0" class="search link icon" aria-label="Search" role="button"></i>
            
                </div>
            </form>
        </div>
        <!-- TOC Menu -->
        <div class="menuContainer">
            
    <a class="item " href="/docs/about.html" role="menuitem">About</a>


    <a class="item " href="/docs/faq.html" role="menuitem">FAQ</a>


    <div class="item" title="">
        <a class="header " href="/docs/reference.html" role="menu">Reference</a>
        <div class="menu">
            
    <a class="item " href="/docs/reference/music.html" role="menuitem">music</a>


    <a class="item " href="/docs/reference/pins.html" role="menuitem">pins</a>


    <a class="item " href="/docs/reference/control.html" role="menuitem">control</a>


    <a class="item " href="/docs/reference/serial.html" role="menuitem">serial</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/blocks.html" role="menu">Blocks</a>
        <div class="menu">
            
    <a class="item " href="/docs/blocks/on-start.html" role="menuitem">On Start</a>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/loops.html">Loops</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/loops/repeat.html" role="menuitem">repeat</a>


    <a class="item " href="/docs/blocks/loops/for.html" role="menuitem">for</a>


    <a class="item " href="/docs/blocks/loops/while.html" role="menuitem">while</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/logic.html">Logic</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/logic/if.html" role="menuitem">if</a>


    <a class="item " href="/docs/blocks/logic/boolean.html" role="menuitem">Boolean</a>

        </div>
    </div>


    <div class="ui  accordion item visible" role="tree" title="">
        <div class=" title">
            <i class="dropdown icon"></i>
            <a class="header" role="treeitem" aria-expanded="false" href="/docs/blocks/variables.html">Variables</a>
        </div>
        <div class=" content">
            
    <a class="item " href="/docs/blocks/variables/assign.html" role="menuitem">assign</a>


    <a class="item " href="/docs/blocks/variables/change.html" role="menuitem">change var</a>


    <a class="item " href="/docs/blocks/variables/var.html" role="menuitem">var</a>

        </div>
    </div>


    <a class="item " href="/docs/blocks/math.html" role="menuitem">Math</a>


    <a class="item " href="/docs/blocks/javascript-blocks.html" role="menuitem">JavaScript blocks</a>


    <a class="item " href="/docs/blocks/custom.html" role="menuitem">Custom blocks</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/javascript.html" role="menu">JavaScript</a>
        <div class="menu">
            
    <a class="item " href="/docs/javascript/call.html" role="menuitem">Calling</a>


    <a class="item " href="/docs/javascript/sequence.html" role="menuitem">Sequencing</a>


    <a class="item " href="/docs/javascript/variables.html" role="menuitem">Variables</a>


    <a class="item " href="/docs/javascript/operators.html" role="menuitem">Operators</a>


    <a class="item " href="/docs/javascript/statements.html" role="menuitem">Statements</a>


    <a class="item " href="/docs/javascript/functions.html" role="menuitem">Functions</a>


    <a class="item " href="/docs/javascript/types.html" role="menuitem">Types</a>


    <a class="item " href="/docs/javascript/classes.html" role="menuitem">Classes</a>


    <a class="item " href="/docs/javascript/interfaces.html" role="menuitem">Interfaces</a>


    <a class="item " href="/docs/javascript/generics.html" role="menuitem">Generics</a>

        </div>
    </div>


    <div class="item" title="">
        <a class="header " href="/docs/types.html" role="menu">Types</a>
        <div class="menu">
            
    <a class="item " href="/docs/types/number.html" role="menuitem">Number</a>


    <a class="item " href="/docs/types/string.html" role="menuitem">String</a>


    <a class="item " href="/docs/types/boolean.html" role="menuitem">Boolean</a>


    <a class="item " href="/docs/types/array.html" role="menuitem">Array</a>


    <a class="item " href="/docs/types/function.html" role="menuitem">Function</a>

        </div>
    </div>



        </div>
    </div>
</div>
<!-- end include toc.html -->


		<div class="article" id="maincontent">
			<div class="article-inner">

				
<!-- include header.html -->
<div class="ui one column padded grid hideprint hidemobile">
    <div class="column">
        
    </div>
</div>

<!-- end include header.html -->


				<div class="main ui container fluid mainbody">
					
            <button id="printbtn" class="circular ui icon right floated button hideprint" title="Print this page">
                <i class="icon print"></i>
            </button>
         
    <div class="ui text">
        <h1 id="interfaces">Interfaces</h1><p>The easiest way to see how interfaces work is to start with a simple example:</p>
<pre><code class="lang-ts">function printLabel(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: &quot;Size 10 Object&quot;};
printLabel(myObj);</code></pre>
<p>The type-checker checks the call to <code>printLabel</code>.
The <code>printLabel</code> function has a single parameter that requires that the object passed in has a property called <code>label</code> of type string.
Notice that our object actually has more properties than this, but the compiler only checks that <em>at least</em> the ones required are present and match the types required.
There are some cases where TypeScript isn’t as lenient, which we’ll cover in a bit.</p>
<p>We can write the same example again, this time using an interface to describe the requirement of having the <code>label</code> property that is a string:</p>
<pre><code class="lang-ts">interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: &quot;Size 10 Object&quot;};
printLabel(myObj);</code></pre>
<p>The interface <code>LabelledValue</code> is a name we can now use to describe the requirement in the previous example.
It still represents having a single property called <code>label</code> that is of type string.
Notice we didn’t have to explicitly say that the object we pass to <code>printLabel</code> implements this interface like we might have to in other languages.
Here, it’s only the shape that matters. If the object we pass to the function meets the requirements listed, then it’s allowed.</p>
<p>It’s worth pointing out that the type-checker does not require that these properties come in any sort of order, only that the properties the interface requires are present and have the required type.</p>
<h2 id="optional-properties">Optional Properties</h2><p>Not all properties of an interface may be required.
Some exist under certain conditions or may not be there at all.
These optional properties are popular when creating patterns like “option bags” where you pass an object to a function that only has a couple of properties filled in.</p>
<p>Here’s an example of this pattern:</p>
<pre><code class="lang-ts">interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: &quot;white&quot;, area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: &quot;black&quot;});</code></pre>
<p>Interfaces with optional properties are written similar to other interfaces, with each optional property denoted by a <code>?</code> at the end of the property name in the declaration.</p>
<p>The advantage of optional properties is that you can describe these possibly available properties while still also preventing use of properties that are not part of the interface.
For example, had we mistyped the name of the <code>color</code> property in <code>createSquare</code>, we would get an error message letting us know:</p>
<pre><code class="lang-ts">interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = {color: &quot;white&quot;, area: 100};
    if (config.color) {
        // Error: Property &#39;clor&#39; does not exist on type &#39;SquareConfig&#39;
        newSquare.color = config.clor;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: &quot;black&quot;});</code></pre>
<h2 id="excess-property-checks">Excess Property Checks</h2><p>In our first example using interfaces, TypeScript lets us pass <code>{ size: number; label: string; }</code> to something that only expected a <code>{ label: string; }</code>.
We also just learned about optional properties, and how they’re useful when describing so-called “option bags”.</p>
<p>However, combining the two naively would let you to shoot yourself in the foot the same way you might in JavaScript.
For example, taking our last example using <code>createSquare</code>:</p>
<pre><code class="lang-ts">interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    let newSquare = {color: &quot;white&quot;, area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({ colour: &quot;red&quot;, width: 100 });</code></pre>
<p>Notice the given argument to <code>createSquare</code> is spelled <em><code>colour</code></em> instead of <code>color</code>.
In plain JavaScript, this sort of thing fails silently.</p>
<p>You could argue that this program is correctly typed, since the <code>width</code> properties are compatible, there’s no <code>color</code> property present, and the extra <code>colour</code> property is insignificant.</p>
<p>However, TypeScript takes the stance that there’s probably a bug in this code.
Object literals get special treatment and undergo <em>excess property checking</em> when assigning them to other variables, or passing them as arguments.
If an object literal has any properties that the “target type” doesn’t have, you’ll get an error.</p>
<pre><code class="lang-ts">// error: &#39;colour&#39; not expected in type &#39;SquareConfig&#39;
let mySquare = createSquare({ colour: &quot;red&quot;, width: 100 });</code></pre>
<h2 id="function-types">Function Types</h2><p>Interfaces are capable of describing the wide range of shapes that JavaScript objects can take.
In addition to describing an object with properties, interfaces are also capable of describing function types.</p>
<p>To describe a function type with an interface, we give the interface a call signature.
This is like a function declaration with only the parameter list and return type given. Each parameter in the parameter list requires both name and type.</p>
<pre><code class="lang-ts">interface SubstrFunc {
    (source: string, index: number): string;
}</code></pre>
<p>Once defined, we can use this function type interface like we would other interfaces.
Here, we show how you can create a variable of a function type and assign it a function value of the same type.</p>
<pre><code class="lang-ts">let mySearch: SubstrFunc;
mySearch = function (src: string, index: number): string {
    return src.substr(index)
}</code></pre>
<p>For function types to correctly type-check, the names of the parameters do not need to match.
We could have, for example, written the above example like this:</p>
<pre><code class="lang-ts">let mySearch: SubstrFunc;
mySearch = function (src: string, i: number): string {
    return src.substr(i)
}</code></pre>
<p>Function parameters are checked one at a time, with the type in each corresponding parameter position checked against each other.
If you do not want to specify types at all, TypeScript’s contextual typing can infer the argument types since the function value is assigned directly to a variable of type <code>SearchFunc</code>.
Here, also, the return type of our function expression is implied by the values it returns (here <code>false</code> and <code>true</code>).
Had the function expression returned numbers or strings, the type-checker would have warned us that return type doesn’t match the return type described in the <code>SearchFunc</code> interface.</p>
<pre><code class="lang-ts">let mySearch: SubstrFunc;
mySearch = function (src, i): string {
    return src.substr(i)
}</code></pre>
<p>Note that you can also give a function type (without using an interface) equivalently as follows:</p>
<pre><code class="lang-ts">type SubstrFunc = (source: string, index: number) =&gt; string;</code></pre>
<h2 id="class-types">Class Types</h2><h3 id="implementing-an-interface">Implementing an interface</h3><p>One of the most common uses of interfaces in languages like C# and Java, that of explicitly enforcing that a class meets a particular contract, is also possible in TypeScript.</p>
<pre><code class="lang-ts">type Date = number

interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}</code></pre>
<p>You can also describe methods in an interface that are implemented in the class, as we do with <code>setTime</code> in the below example:</p>
<pre><code class="lang-ts">
type Date = number

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date): void;
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}</code></pre>
<p>Interfaces describe the public side of the class, rather than both the public and private side.
This prohibits you from using them to check that a class also has particular types for the private side of the class instance.</p>
<h2 id="extending-interfaces">Extending Interfaces</h2><p>Like classes, interfaces can extend each other.
This allows you to copy the members of one interface into another, which gives you more flexibility in how you separate your interfaces into reusable components.</p>
<pre><code class="lang-ts">interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = &lt;Square&gt;{ color: &quot;blue&quot;, sideLength: 10 }</code></pre>
<p>An interface can extend multiple interfaces, creating a combination of all of the interfaces.</p>
<pre><code class="lang-ts">interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = &lt;Square&gt;{ color: &quot;blue&quot;, sideLength: 10, penWidth: 5.0}</code></pre>
<h2 id="hybrid-types">Hybrid Types</h2>
    <div class="ui info message">
        <div class="content">
            <p>Static TypeScript does not currently permit hybrid types, as discussed below.</p>

        </div>
    </div>
<p>As we mentioned earlier, interfaces can describe the rich types present in real world JavaScript.
Because of JavaScript’s dynamic and flexible nature, you may occasionally encounter 
an object that works as a combination of some of the types described above.</p>
<p>One such example is an object that acts as both a function and an object, with additional properties:</p>
<pre><code class="lang-ts">interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = &lt;Counter&gt;function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;</code></pre>
<p>When interacting with 3rd-party JavaScript, you may need to use patterns like the above to fully describe the shape of the type.</p>
<h2 id="interfaces-extending-classes">Interfaces Extending Classes</h2>
    <div class="ui info message">
        <div class="content">
            <p>Static TypeScript does not currently permit interfaces extending classes, as discussed below.</p>

        </div>
    </div>
<p>When an interface type extends a class type it inherits the members of the class but not their implementations.
It is as if the interface had declared all of the members of the class without providing an implementation.
Interfaces inherit even the private and protected members of a base class.
This means that when you create an interface that extends a class with private or protected members, that interface type can only be implemented by that class or a subclass of it.</p>
<p>This is useful when you have a large inheritance hierarchy, but want to specify that your code works with only subclasses that have certain properties.
The subclasses don’t have to be related besides inheriting from the base class.
For example:</p>
<pre><code class="lang-ts">class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control {
    select() { }
}

class TextBox extends Control {
    select() { }
}

class Image {
    select() { }
}

class Location {
    select() { }
}</code></pre>
<p>In the above example, <code>SelectableControl</code> contains all of the members of <code>Control</code>, including the private <code>state</code> property.
Since <code>state</code> is a private member it is only possible for descendants of <code>Control</code> to implement <code>SelectableControl</code>.
This is because only descendants of <code>Control</code> will have a <code>state</code> private member that originates in the same declaration, which is a requirement for private members to be compatible.</p>
<p>Within the <code>Control</code> class it is possible to access the <code>state</code> private member through an instance of <code>SelectableControl</code>.
Effectively, a <code>SelectableControl</code> acts like a <code>Control</code> that is known to have a <code>select</code> method.
The <code>Button</code> and <code>TextBox</code> classes are subtypes of <code>SelectableControl</code> (because they both inherit from <code>Control</code> and have a <code>select</code> method), but the <code>Image</code> and <code>Location</code> classes are not.</p>

    </div>

					<div class="hideprint"></div>
				</div>

				
<!-- include footer.html -->
<footer class="ui vertical footer segment hideprint" aria-hidden="false">
    <div class="ui center aligned container">
        <div class="ui horizontal link list">
            <a class="item" href="https://twitter.com/intent/follow?screen_name=MsMakeCode" title="Follow us on Twitter" target="_blank"
                rel="noopener">
                <i class="huge icon twitter"></i>
            </a>
            <a class="item" href="https://www.instagram.com/makecode/" title="Follow us on Instagram" target="_blank" rel="noopened">
                <i class="huge icon instagram"></i>
            </a>
            <a class="item" href="https://www.youtube.com/channel/UCye7YlvFUUQ1dSy0WZZ1T_Q" title="Subscribe to our YouTube channel"
                target="_blank" rel="noopened">
                <i class="huge icon youtube"></i>
            </a>
            <a class="item" href="mailto:makecode@microsoft.com" title="Send us an Email" rel="noopened">
                <i class="huge icon mail"></i>
            </a>
        </div>
        <div class="ui section divider"></div>
        <div class="ui container horizontal small divided link list">
            <!-- <a class="item" href="https://makecode.com/contact" target="_blank" rel="noopener">Contact Us</a> -->
            <a class="item" href="https://makecode.com/privacy" target="_blank" rel="noopener">Privacy &amp; Cookies</a>
            <a class="item" href="https://makecode.com/termsofuse" target="_blank" rel="noopener"> Terms Of Use</a>
            <a class="item" href="https://makecode.com/trademarks" target="_blank" rel="noopener">Trademarks</a>
            <div class="item">© 2018 Microsoft</div>
        </div>
        <div class="ui container horizontal small divided link list">
            <a class="ui centered item" href="https://makecode.com/" title="Microsoft MakeCode" target="_blank" rel="noopener">Powered by Microsoft MakeCode</a>
        </div>
    </div>
</footer>

<!-- end include footer.html -->

			</div>

		</div>

	</div>


	
<!-- include macros.html -->
<!-- macro button -->

<!-- macro vimeo -->

<!-- macro youtube -->

<!-- macro section -->

<!-- macro hide -->

<!-- macro avatar -->

<!-- macro hint -->

<!-- wrapped around ordinary content -->
<!-- macro main-container -->

<!-- used for 'column' box - they are collected and wrapped in 'column-container' -->
<!-- macro column -->
<!-- macro column-container -->


<!-- Menu on the top of the page -->
<!-- macro item -->

<!-- macro divider -->

<!-- macro top-dropdown -->

<!-- macro inner-dropdown -->


<!-- TOC in the sidebar -->
<!-- macro item -->

<!-- macro divider -->

<!-- macro top-dropdown -->

<!-- macro top-dropdown-noheading -->

<!-- macro inner-dropdown -->

<!-- macro nested-dropdown -->

<!-- end include macros.html -->

	
<!-- include tracking.html -->
<script type="text/javascript" src="/pxtweb.js"></script>
<script type="text/javascript">
    window.loadAppInsights = function (includeCookie) {
        var appInsights=window.appInsights||function(config){
            function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
        }({
            instrumentationKey:"9801ed01-c40f-46ec-aa40-2a1742a9e71c",
            disableAjaxTracking: true,
            overridePageViewDuration: false,
            disableExceptionTracking: true,
            isCookieUseDisabled: !includeCookie,
            isStorageUseDisabled: !includeCookie,
            url: "/ai.0.js"
        });
        window.appInsights=appInsights;
        appInsights.queue.push(function () {
            appInsights.context.addTelemetryInitializer(function (envelope) {
                if (typeof pxtConfig === "undefined") return;
                var telemetryItem = envelope.data.baseData;
                telemetryItem.properties = telemetryItem.properties || {};
                telemetryItem.properties["target"] = pxtConfig.targetId;
                telemetryItem.properties["stage"] = (pxtConfig.relprefix || "/--").replace(/[^a-z]/ig, '')
                telemetryItem.properties["cookie"] = includeCookie;
                if (typeof Windows !== "undefined")
                    telemetryItem.properties["WindowsApp"] = 1;
                var userAgent = navigator.userAgent.toLowerCase();
                var userAgentRegexResult = /\belectron\/(\d+\.\d+\.\d+.*?)(?: |$)/i.exec(userAgent); // Example navigator.userAgent: "Mozilla/5.0 Chrome/61.0.3163.100 Electron/2.0.0 Safari/537.36"
                if (userAgentRegexResult) {
                    telemetryItem.properties["Electron"] = 1;
                    telemetryItem.properties["ElectronVersion"] = userAgentRegexResult[1];
                }
                if (typeof pxtElectron !== "undefined") {
                    telemetryItem.properties["PxtElectron"] = 1;
                    telemetryItem.properties["ElectronVersion"] = pxtElectron.versions.electronVersion;
                    telemetryItem.properties["ChromiumVersion"] = pxtElectron.versions.chromiumVersion;
                    telemetryItem.properties["NodeVersion"] = pxtElectron.versions.nodeVersion;
                    telemetryItem.properties["PxtElectronVersion"] = pxtElectron.versions.pxtElectronVersion;
                    telemetryItem.properties["PxtCoreVersion"] = pxtElectron.versions.pxtCoreVersion;
                    telemetryItem.properties["PxtTargetVersion"] = pxtElectron.versions.pxtTargetVersion;
                    telemetryItem.properties["PxtElectronIsProd"] = pxtElectron.versions.isProd;
                }
            });
        });
        appInsights.trackPageView(null, scrubUrl(window.location.toString()), {urlReferrer: scrubUrl(document.referrer.toString())});

        //Scrub the key (if any) from the URL.
        function scrubUrl(url) {
            var scriptIdRegex = /(?:\d{5}-\d{5}-\d{5}-\d{5})|(?:_[0-9a-zA-Z]{12})/g;
            return url.replace(scriptIdRegex, "xxxxx-xxxxx-xxxxx-xxxxx");
        }
    }
    pxt.initAnalyticsAsync();
</script>
<!-- end include tracking.html -->


</body>

</html>